<template>
    <el-container class="home-container">
        <el-header><!-- 头部区 -->
            <!-- 头部区 -->
            <!--左  -->
            <div class="h_left">
                <div class="l_icon"></div>
                <div class="l_font">图形化流程设计工具</div>
            </div>
            <!--右  -->
            <div class="h_right">
                <div class="msg"><span class="el-icon-bell"></span></div>
                <div class="userIcon"></div>
                <div class="userName">
                    <el-dropdown trigger="click" @command="handleCommand">
                        <span class="el-dropdown-link">
                            Admin<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a">个人中心</el-dropdown-item>
                            <el-dropdown-item command="exit">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <!-- 页面主体区域 -->
        <!-- 页面主体区域 -->
        <el-container class="content">
            <!-- 侧边栏 -->
            <div class="aside">
                <el-aside width="388px">
                    <el-menu text-color="#747A8A" background-color="#F2F6FD" active-text-color="#4171C4" @select="menuClick"
                        :default-active="defaultActive">
                        <!-- <el-submenu :index="menu_1.id" v-for="menu_1 in menuList" :key="menu_1.id">  
                            <template slot="title">
                                <i :class="menu_1.icon"></i>
                                <span @click="menuClick(menu_1)">{{ menu_1.name }}</span>
                            </template>                          
                            <template v-if="menu_1.children">
                                <el-submenu :index="menu_2.id" v-for="menu_2 in menu_1.children" :key="menu_2.id">  
                                    <template slot="title">
                                        <i :class="menu_2.icon"></i>
                                        <span @click="menuClick(menu_2)">{{ menu_2.name }}</span>
                                    </template>                          
                                    <template v-if="menu_2.children">
                                        <el-submenu :index="menu_3.id" v-for="menu_3 in menu_2.children" :key="menu_3.id">  
                                            <template slot="title">
                                                <i :class="menu_3.icon"></i>
                                                <span @click="menuClick(menu_3)">{{ menu_3.name }}</span>
                                            </template>                          
                                            <template v-if="menu_3.children">
                                                
                                            </template>
                                        </el-submenu>
                                    </template>
                                </el-submenu>
                            </template>
                        </el-submenu> -->
                        <div v-for="menu_1 in menuList" :key="menu_1.id">
                            <template v-if="menu_1.children">
                                <el-submenu :index="menu_1.id">
                                    <template slot="title">
                                        <i :class="menu_1.icon"></i>
                                        <span>{{ menu_1.name }}</span>
                                    </template>
                                    <!-- 二级菜单 -->
                                    <div v-for="menu_2 in menu_1.children" :key="menu_2.id">
                                        <template v-if="menu_2.children">
                                            <el-submenu :index="menu_2.id">
                                                <template slot="title">
                                                    <i :class="menu_2.icon"></i>
                                                    <span>{{ menu_2.name }}</span>
                                                </template>
                                                <!-- 三级菜单 -->
                                                <div v-for="menu_3 in menu_2.children" :key="menu_3.id">
                                                    <template v-if="menu_3.children">

                                                    </template>
                                                    <el-menu-item :index="menu_3.id" v-else @click="menuClick(menu_3)">
                                                        <i :class="menu_3.icon"></i>
                                                        <span slot="title">{{ menu_3.name }}</span>
                                                    </el-menu-item>
                                                </div>
                                            </el-submenu>
                                        </template>
                                        <el-menu-item :index="menu_2.id" v-else @click="menuClick(menu_2)">
                                            <i :class="menu_2.icon"></i>
                                            <span slot="title">{{ menu_2.name }}</span>
                                        </el-menu-item>
                                    </div>
                                </el-submenu>
                            </template>
                            <el-menu-item :index="menu_1.id" v-else @click="menuClick(menu_2)">
                                <i :class="menu_1.icon"></i>
                                <span slot="title">{{ menu_1.name }}</span>
                            </el-menu-item>
                        </div>
                    </el-menu>
                </el-aside>
            </div>
            <!-- 右侧内容主体 -->
            <el-main>
                <iframe :src="selectMenu.link" sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
                    v-if="selectMenu.isIframe"></iframe>
                <Pages v-else />
            </el-main>
        </el-container>
    </el-container>
</template>
 
<script>
import Pages from '@/pages/index.vue'
export default {
    components: {
        Pages,
    },
    data() {
        return {
            defaultActive: '1',
            menuList: [],//菜单列表 
            selectMenu: {},//选中的菜单
        }
    },
    methods: {
        handleCommand(val) {
            if (val === 'exit') {
                localStorage.setItem('userInfo', '')
                this.$router.push({ path: '/' })
                location.reload()
            }
        },
        menuClick(info) {
            if (info.children) return;
            this.selectMenu = info;
            if (info.isIframe) {
                // selectMenu
            } else {
                this.$router.push({ path: (info.rote || '/') })
            }

        },
    },
    created() {
        this.menuList = window.config.menu;
        this.defaultActive = window.config.defaultActiveMenu;

        const id = this.defaultActive
        if (!id) return
        const searchMenuById = (data) => {
            data.forEach(item => {
                if (item.id === id) {
                    this.selectMenu = item;
                    if (!item.isIframe) {
                        this.$router.push({ path: (item.rote || '/') })
                    }
                } else if (item.children) {
                    searchMenuById(item.children)
                }
            });
        }
        searchMenuById(this.menuList)
    },
}
</script>
 
<style lang="less" scoped>
v-deep li:hover {
    background: none;
}

.home-container {
    height: 100%;
    // background-color: #F2F6FD;

    .el-header {
        background: #17244a;
        width: 100%;
        height: 80px;
        line-height: 80px;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;

        div {
            //内嵌的div样式
            display: flex;
            align-items: center; //Logo和文字上下居中

            span {
                margin-left: 15px; //文字左侧设置间距，防止与Logo紧贴
            }
        }

        .h_left {
            width: 330px;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .l_icon {
                width: 49px;
                height: 40px;
                background: url(../assets/headerIcon.png) no-repeat;
                background-size: 100% 100%;
            }

            .l_font {
                font-size: 30px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #ffffff;
            }
        }

        .h_right {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .msg {
                width: 44px;
                height: 44px;
                line-height: 50px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                margin-right: 15px;
                text-align: center;

                span {
                    color: #ffffff;
                    font-size: 22px;
                }
            }

            .userIcon {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: red;
                margin-right: 15px;
            }

            .userName {
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #ffffff;

                .el-dropdown {
                    color: #fff;
                    font-weight: bold;
                    font-size: 16px;
                }
            }
        }
    }

    .content {
        height: calc(100% - 80px);

        .aside {
            width: 388px;
            background-color: none;
            overflow: hidden;

            .el-aside::-webkit-scrollbar {
                display: none;
            }

            .el-aside {
                height: 100%;
                border-right: 1px solid #c7c7c7;
                overflow-x: hidden;
                overflow-y: scroll;
                background: #F2F6FD;

                .el-menu {
                    .el-menu-item:hover {
                        color: #4171C4 !important;
                        background-color: transparent !important;
                    }

                    .el-menu-item {
                        font-size: 22px;
                    }

                    .is-active {
                        background: #fff !important;
                    }

                    .el-submenu__title:hover {
                        color: #4171C4 !important;
                        background-color: transparent !important;
                    }

                    .el-submenu {
                        .el-submenu__title {

                            span {
                                font-size: 22px;
                            }
                        }

                    }
                }
            }
        }

        .el-main {
            padding: 0;
            background-color: #f2f6fd;

            iframe {
                width: 100%;
                height: calc(100% - 10px);
                border: none;
            }
        }
    }
}
</style>
